/** 
 * 学习目标：使用Ref获取文本框的DOM元素
**作用：获取组件实例、获取DOM**  （作用与Vue中的Ref相同)



目标：使用Ref获取文本框的DOM元素

使用步骤：

1. 调用`React.createRef()`方法创建一个 ref 对象，用于关联模板中的某个元素，在模板渲染完毕后可以通过 ref 对象访问到模板中的元素。
txtRef = React.createRef()
2. 将创建好的ref对象添加到文本框中
<input type="text" ref={this.txtRef}/>
3. 通过 ref 对象获取文本框的值
handleClick = () => {
  console.log(this.txtRef.current.value)
}

总结：

1. 作用：获取组件实例、DOM对象。 （与Vue中的ref，在作用上相同） 
2. ref 的价值在于获取 **组件实例对象**。
3. 使用步骤：
   1. 创建ref对象
   2. 绑定到组件或DOM上
   3. 使用`this.ref对象.current` 获取组件或DOM
 * */
import React from "react";

export default class App extends React.Component {
    // 1. 调用`React.createRef()`方法创建一个 ref 对象，用于关联模板中的某个元素，在模板渲染完毕后可以通过 ref 对象访问到模板中的元素。
    txtRef = React.createRef()
    render() {
        return (
            < >
                {/* 2. 将创建好的ref对象添加到文本框中 */}
                <input type="text" ref={this.txtRef} />
                <button onClick={this.handleClick}>点击获取DOM元素</button>
            </ >
        );
    }
    // 3.通过 ref 对象获取文本框的值
    handleClick = () => {
        // 通过this.txtRef.current 获取DOM对象
        console.log(this.txtRef.current.value)
    }
    // anfn 快速生成箭头函数

}